<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<select id="sheng">
    <option value="">-请选择-</option>-->
</select>

<select id="shi">
    <option value="">-请选择-</option>
</select>

<select id="xian">
    <option value="">-请选择-</option>
</select>
<script>
    var osheng=document.getElementById("sheng");
    var oshi=document.getElementById("shi");
    var oxian=document.getElementById("xian");

    var arr_sheng=['武汉','江苏','河北'];

    var arr_shi=[['武汉市'],
        ['杭州','南京市','扬州市'],
        ['石家庄','秦皇岛','张家口']];

    var arr_xian=[
        [
            ['武昌区','黄岗区','荆州区','江汉区']],
        [
            ['玄武区'],
            ['虎丘区','吴中区','相城区'],
            ['长安区','桥东区']],
        [
            ['海港区'],
            ['桥东区'],
            ['黄河','大奖','大多数','大苏打']
        ]];

         var  quanju_arr

    function input_arr(arr,event){
        for(var i=0;i<arr.length;i++){
            var option=new Option(arr[i],i);
            event.appendChild(option);
        }
    }

    input_arr(arr_sheng,osheng);

     osheng.onchange= function () {
        oshi.options.length=1;
        oxian.options.length=1;
        var index=this.value;
        var arr_shi_next=arr_shi[index];
        quanju_arr=arr_xian[index];
        input_arr(arr_shi_next,oshi);
    }

    oshi.onchange= function () {
        oxian.options.length=1;
        var index=this.value;
        var arr_xian_next=quanju_arr[index];
        input_arr(arr_xian_next,oxian);
    }
</script>
</body>
</html>